Notebox

Notebox is a read-only step that adds some notes to the user between steps.

Step Config

Key	Description	Is Optional?
type	Should be notebox to differs from other steps.	Required
stepId	Unique step identifier.	Required
backgroundImage	The background image of the page.	Required
config	Config	Required
cta	CTA JSON config	Required

Config

Key	Description	Is Optional?
doCount	Number of dots at the top part of the “Notebox”	Optional — Min 1 — Defaults to 10
dotColor	Accepts background color of the CTA button.	Optional
bgColor	The “Notebox” background color.	Optional
edgeBgColor	Edge color creating a floating effect.	Required
textColor	Text Color.	Required
texts	Accepts an array of strings representing paragraphs. useHTML applied by default	Required — minimum count 1
mascotImage	Accepts a link to mascot image	Optional

CTA JSON Config

Key	Description	Is Optional?
text	CTA text.	Required
backgroundColor	Accepts background color of the CTA button.	Optional
textColor	Accepts color of CTA text.	Optional
showButtonsDelay	Accepts a number that represents delay before the button shows. (Accepts time in milliseconds).	Optional
soundEffect	Accepts link of a sound to be played on proceeding to next step.	Optional
hideArrow	Whether to hide the arrow in the CTA button or not.	Optional — Defaults to false
width	Width of the Notebox card	Optional — Defaults to 300
height	Height of the Notebox card	Optional — Defaults to 350

Example

Notebox

{
  "id": "mind_app_id",
  "language": "en",
  "appId": "co.thefab.mind",
  "seo": {
    "title": "Lumiere",
    "favicon": "https://c.thefab.co/web-onboarding/mind/mind-favicon.png",
    "description": "Manage stress and anxiety through self-care practices and empowering affirmations. Embark on a journey of self-love."
  },
  "sections": [
    {
      "title": "Your Inner Drive",
      "titleColor": "#6455FE",
      "start": "step_id_1",
      "end": "Notebox",
      "progressColor": "#6455FE",
      "progressEndColor": "transparent",
      "progressBgColor": "#E0DDFF"
    }
  ],
  "steps": [
    {
      "stepId": "step_id_1",
      "type": "yesNoQuestion",
      "textColor": "#251C93",
      "title": "Fasting makes people feel tired",
      "ctas": [
        {
          "text": "Fact",
          "value": "fact",
          "textColor": "#FFFFFF",
          "backgroundColor": "#3425B8"
        },
        {
          "text": "Myth",
          "value": "myth",
          "textColor": "#FFFFFF",
          "backgroundColor": "#3425B8"
        }
      ]
    },
    {
      "stepId": "Notebox",
      "type": "notebox",
      "backgroundImage": "https://storage.googleapis.com/c.thefab.co/Shape/onboarding/Backgrounds/img_shape_onboarding_background_01.jpg",
      "config": {
        "dotCount": 10,
        "dotColor": "#beb9f1",
        "bgColor": "#FFFF",
        "edgeBgColor": "#c9c4ef",
        "textColor": "#3425B8",
        "texts": [
          "<span style='background-color: rgba(159, 244, 255, 0.50);'>It's perfectly normal to feel demotivated during the</span> process of change.",
          "During these moments, we will recommend coaching sessions based on Acceptance and Commitment Therapy (ACT).",
          "<span style='background-color: rgba(255, 216, 176, 0.50);'>Your body has a natural inclination towards health,</span> and we're here to help you bring that to the surface."
        ],
        "mascotImage": "https://storage.googleapis.com/c.thefab.co/Shape/onboarding/Mascots/img_shape_onboarding_feedback_mascot_01.png"
      },
      "cta": {
        "text": "Continue",
        "backgroundColor": "#3425B8",
        "textColor": "#FFFFFF"
      }
    }
  ],
  "logic": []
}